<!-- 车型添加 -->
<template>
  <div>
    <el-dialog
      :title="carModelsList.id ? '编辑车型' : '添加车型'"
      :visible="dialogFormVisible"
      width="600px"
      @close="closeFormVisible"
      @open="editcarModels"
    >
      <!-- :rules="ruleInline" -->
      <el-form
        ref="dataForm"
        :rules="ruleInline"
        :model="formBase"
        label-position="right"
        label-width="120px"
        style="width: 100%"
      >
        <el-form-item
          label="车辆类型"
          prop="name"
        >
          <el-input
            v-model="formBase.name"
            placeholder="请输入车辆类型"
            maxlength="15"
          />
        </el-form-item>
        <el-form-item
          prop="allowableLoad"
          style="width: 100%"
          label="应载重量"
        >
          <el-input
            v-model="formBase.allowableLoad"
            placeholder="请输入车型重量"
            maxlength="20"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >吨</span>
          </el-input>
        </el-form-item>
        <el-form-item
          prop="allowableVolume"
          style="width: 100%"
          label="应载体积"
        >
          <el-input
            v-model="formBase.allowableVolume"
            placeholder="请输入车型体积"
            maxlength="20"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >立方</span>
          </el-input>
        </el-form-item>
        <el-form-item
          style="width: 100%"
          label="长"
          prop="measureLong"
        >
          <el-input
            v-model="formBase.measureLong"
            placeholder="请输入长度"
            maxlength="20"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          style="width: 100%"
          label="宽"
          prop="measureWidth"
        >
          <el-input
            v-model="formBase.measureWidth"
            placeholder="请输入宽度"
            maxlength="20"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >米</span>
          </el-input>
        </el-form-item>
        <el-form-item
          style="width: 100%"
          label="高"
          prop="measureHigh"
        >
          <el-input
            v-model="formBase.measureHigh"
            placeholder="请输入高度"
            maxlength="20"
          >
            <span
              slot="suffix"
              style="
                color: #20232a;
                font-weight: 400;
                font-size: 14px;
                font-family: PingFangSC, PingFangSC-Regular;
                margin-right: 14px;
              "
            >米</span>
          </el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
        style="text-align: center"
      >
        <el-button
          class="save-btn"
          type="warning"
          @click="addCarModels"
        >确认</el-button>
        <el-button
          class="cancel-btn"
          @click="closeFormVisible"
        >取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { add, update } from '@/api/transit'
export default {
  name: 'CarModelsAdd',
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false
    },
    carTypeList: {
      type: Function,
      default: () => ({})
    },
    carModelsList: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    const NumberPattern = new RegExp(/^([1-9]?\d|100)$/)
    return {
      formBase: {
        allowableLoad: '', // 准载重量
        allowableVolume: '', // 准载体积
        measureHigh: '0.0', // 高
        measureLong: '0.0', // 长
        measureWidth: '0.0', // 宽
        name: '' // 车辆类型名称
      },
      // 表单验证
      ruleInline: {
        name: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' },
          {
            pattern: NumberPattern,
            message: '只可输入1-100之间的整数',
            trigger: 'blur'
          }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' },
          {
            pattern: NumberPattern,
            message: '只可输入1-100之间的整数',
            trigger: 'blur'
          }
        ],
        measureLong: [
          { required: true, message: '长度不能为空', trigger: 'blur' },
          {
            pattern: NumberPattern,
            message: '长最多输入100,请重新输入',
            trigger: 'blur'
          }
        ],
        measureWidth: [
          { required: true, message: '宽度度不能为空', trigger: 'blur' },
          {
            pattern: NumberPattern,
            message: '宽最多输入100,请重新输入',
            trigger: 'blur'
          }
        ],
        measureHigh: [
          { required: true, message: '高度不能为空', trigger: 'blur' },
          {
            pattern: NumberPattern,
            message: '高最多输入100,请重新输入',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    // 编辑回填表单
    editcarModels () {
      if (this.carModelsList.id) {
        const {
          allowableLoad,
          allowableVolume,
          measureHigh,
          measureLong,
          measureWidth,
          name,
          id
        } = this.carModelsList
        this.formBase = {
          allowableLoad,
          allowableVolume,
          measureHigh,
          measureLong,
          measureWidth,
          name,
          id
        }
      }
    },
    // 提交表单
    addCarModels () {
      this.$refs.dataForm.validate(async valid => {
        if (!valid) return
        if (this.carModelsList.id) {
          await update(this.formBase.id, this.formBase)
          this.$message.success('编辑成功')
        } else {
          this.$message.success('添加成功')
          await add(this.formBase)
        }
        this.closeFormVisible()
        this.carTypeList()
      })
    },
    // 关闭弹框
    closeFormVisible () {
      this.formBase = {
        allowableLoad: '',
        allowableVolume: '',
        measureHigh: '0.0',
        measureLong: '0.0',
        measureWidth: '0.0',
        name: ''
      }
      this.$emit('closeFormVisible', false)
      this.$refs.dataForm.resetFields()
    }
  }
}
</script>
